<template>
	<view class="control">
		<view class="swiper">
			<!-- <u-swiper :list="list1" indicator indicatorMode="line" circular></u-swiper> -->
		</view>
		<view class="main">
			<!-- <scroll-view scroll-y class="aside"> -->
			<view class="aside ">

				<view :data-index2="index" v-for="(item , index) in cate" :key="index" @click="fenlei(item , index)"
					:class="{'aside-item':true , 'active':item.id == catenum}">
					<view class="aside-name">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- </scroll-view> -->
			<view class="con" v-if="belong === 'card'">
				<!-- 会员办卡 -->
				<view class="data-list2">
					<u-tabs :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }" @click="tabClick">
					</u-tabs>
					<scroll-view scroll-y class="scroll">
						<!-- <view class="data-item flex-align" v-for="(item, index) in cate_data" :key="index"> -->

						<navigator :url=" '/page_venues/pages/venuesDetail/memberCard/memberCard' + '?id=' + item.id +
							  '&venue_name=' +
							  item.venue_name +
							  '&venue_id=' +
							  item.venue_id
							" class="data-item flex-align" v-for="(item, index) in cate_data" :key="index">
							<view class="image">
								<u--image :src="item.product_img" width="100%" height="100%" radius="5"></u--image>
							</view>

							<view class="detail">
								<view>
									<view class="title ellipsis-1">{{item.venue_name}}</view>
									<!-- <view class="tag-list flex-align">
										<view class="tag">游泳</view>
									</view> -->
									<view style="color: #a3a3a3;
								font-size: 23rpx;
									padding: 10rpx 10rpx 20rpx 0rpx;
									margin-right: 10rpx;white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;">
										{{item.product_name}}
									</view>
								</view>
								<view class="flex-between">
									<view class="price">￥{{item.product_price}}</view>
									<view class="price-2" v-if="item.sold_num >= item.volume">已售：{{item.sold_num}}张</view>
									<view class="price-2" v-else>已售：{{item.volume}}张</view>
								</view>
							</view>
							<!-- </view> -->
						</navigator>
						<!-- <u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
							:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" /> -->
						<!-- <view class="" style="width: 100%; height: 20rpx;"></view> -->
					</scroll-view>
				</view>
			</view>
			<!-- 门票购买 -->
			<view class="con" v-if="belong === 'ticket'">
				<view class="data-list1">
					<u-tabs :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }" @click="tabClick">
					</u-tabs>
					<scroll-view scroll-y class="scroll">
						<navigator :url="
						  '/page_venues/pages/venuesDetail/ticketModule/ticketModule' +
						  '?id=' +
						  item.id +
						  '&venue_name=' +
						 item.venue_name +
						  '&venue_id=' +
						  item.venue_id 
						" class="data-item flex-align" v-for="(item, index) in cate_data" :key="index">
							<!-- <view class="data-item flex-align" v-for="(item, index) in cate_data" :key="index"> -->
							<view class="image">
								<u--image :src="item.product_img" width="100%" height="100%" radius="5"></u--image>
							</view>

							<view class="detail">
								<view>
									<view class="title ellipsis-1">{{item.venue_name}}</view>
									<!-- <view class="tag-list flex-align">
										<view class="tag">游泳</view>
									</view> -->
									<view style="color: #a3a3a3;
								font-size: 23rpx;
									padding: 10rpx 10rpx 20rpx 0rpx;
									margin-right: 10rpx;white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;">
										{{item.product_name}}
									</view>
								</view>
								<view class="flex-align">
									<view class="flex-align">
										<view class="price">￥{{item.product_price}}</view>
										<view class="price-2">￥{{item.through_price}}</view>
									</view>
									<view style="margin-left:auto;color: #cfcfcf;font-size: 20rpx;"  v-if="item.sold_num >= item.volume">销量：{{item.sold_num}}
									</view>
									<view style="margin-left:auto;color: #cfcfcf;font-size: 20rpx;" v-else>销量：{{item.volume}}
									</view>
								</view>
							</view>
							<!-- </view> -->
						</navigator>
						<!-- <u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
							:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" /> -->
						<!-- <view class="" style="width: 100%; height: 20rpx;"></view> -->
					</scroll-view>
				</view>
			</view>
			<!--  场地预约 -->
			<view class="con" v-if="belong === 'court'">
				<view class="data-list6">
					<!-- <u-tabs  :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
							@click="tabClick"></u-tabs> -->
					<scroll-view scroll-y class="scrollcolumn">
						<view class="goods-item flex-align" v-for="(item, index) in cate_data" :key="index"
							@click="cdClick(item)">
							<view class="image" style="width: 200rpx;
								height: 150rpx;
								margin-right: 24rpx;">
								<u--image width="100%" height="100%" radius="5" :src="item.product_img"></u--image>
								<view class="tag">精选</view>
							</view>
							<view class="detail">
								<view>
									<view class="title elipsis-1">{{ item.court_name }}</view>
									<!-- <view class="detail-1 flex-align">
										<u-tag style="color: #fff;padding-left: 10rpx;"
											v-for="(mark, markIndex) in item.marks" :key="markIndex" :text="mark"
											:borderColor="isOdd(markIndex) ? '#cdf0de' : '#fbdafd'"
											:bgColor="isOdd(markIndex) ? '#cdf0de' : '#fbdafd'"
											:color="isOdd(markIndex) ? '#24b96a' : '#ee58f6'" size="mini">
										</u-tag>
									</view> -->
									<view class="detail-1 flex-align"
										style="font-size: 30rpx;color: #ff4811;font-weight: 700;">
										￥{{item.min_price}}/起
									</view>
								</view>
								<!-- <view class="flex-align">
										<view class="price">{{ item.address }}</view>
										
									</view> -->
								<view class="item-info-bottom">
									<view class="desc">{{ item.venue_name }}</view>
								</view>
							</view>
						</view>
						<!-- <u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
							:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" /> -->
						<view class="" style="width: 100%; height: 20rpx;"></view>
					</scroll-view>
				</view>
			</view>
			<view class="con" v-if="belong == 'train'">
				<!-- 培训报班 -->
				<view class="data-list5">
					<u-tabs :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }" @click="tabClick">
					</u-tabs>
					<scroll-view scroll-y class="scroll">
						<navigator :url="
						  '/pages_other/train/train' +
						  '?id=' +
						  item.id +
						  '&venue_name=' +
						  item.venue_name +
						  '&venue_id=' +
						  item.venue_id
						" class="goods-item flex-align" v-for="(item, index) in cate_data" :key="index">
							<!-- <view class="goods-item flex-align" v-for="(item, index) in cate_data" :key="index"> -->
							<view class="image">
								<u--image width="100%" height="100%" radius="5" :src="item.product_img"></u--image>
								<!-- <view class="image-info">{{item.stock_sales}}人已报名</view> -->
								<view class="image-info" v-if="item.sold_num >= item.stock_sales">{{item.sold_num}}人已报名</view>
								<view class="image-info" v-else>{{item.stock_sales}}人已报名</view>
								<!-- <view class="tag">热门</view> -->
								<view class="tag1" v-if="item.train_enum_id == 1">短训</view>
								<view class="tag2" v-if="item.train_enum_id == 2">长训</view>
								<view class="tag3" v-if="item.train_enum_id == 3">小班</view>
							</view>
							<view class="detail">
								<view>
									<view class="title elipsis-1"> {{item.name}}</view>
									<view class="detail-1 flex-align">
										<!-- <view class="tag" style="color: #fff;">游泳
										</view> -->
										<view style="color: #a3a3a3;
								font-size: 23rpx;
								padding: 10rpx 10rpx 20rpx 0rpx;
								margin-right: 10rpx;white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;">
											{{item.venue_name}}
										</view>

									</view>
									<!-- <view class="flex-align detail-2">
										<image mode="aspectFit"
											src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/16b64ab661803b447f713dbd9d40c939b98f9a5b.png">
										</image>
										剩余名额：{{item.left_stock}}人
									</view> -->
								</view>
								<view class="flex-align">
									<view class="price">￥<text>{{item.min_price}}<text
												style="font-size: 20rpx">起</text></text></view>
									<!-- <view class="info">6节课</view> -->
								</view>
							</view>
						</navigator>
						<!-- </view> -->
					<!-- 	<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
							:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" /> -->
						<view class="" style="width: 100%; height: 20rpx;"></view>
					</scroll-view>
				</view>
			</view>
			<view class="con" v-if="belong == 'enroll'">
				<!-- 赛事报名 -->
				<view class="data-list9">
					<u-tabs :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"></u-tabs>
					<scroll-view scroll-y class="scroll">
						<navigator :url="'/pages/race/race'+'?id=' + item.id +
						'&cate_type=' +
						'enroll'+
						'&windows=' +
						item.windows+
						'&venue_name=' +
						item.venue_name +
						'&venue_id=' +
						item.venue_id" class="data-item" v-for="(item, index) in cate_data" :key="index">
							<!-- <view class="data-item" v-for="(item, index) in cate_data" :key="index"> -->
							<view class="image">
								<u--image :src="item.activity.race_img" radius="5" width="100%" height="220rpx"></u--image>
								<view class="top-tag">自定义</view>
							</view>
							<view class="">

								<view class="title"> {{item.product_name}} </view>
								<view
									style="color: #a3a3a3;font-size: 23rpx;padding: 10rpx 10rpx 20rpx 0rpx;margin-right: 10rpx;">
									<view class=""
										style="width: 500rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
									{{item.venue_name}}
									</view>
								</view>
							</view>
							<!-- </view> -->
						</navigator>
					<!-- 	<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
							:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" /> -->
						<view class="" style="width: 100%; height: 20rpx;"></view>
					</scroll-view>
				</view>
			</view>
			<!-- <view class="con" v-if="catenum == 5">
				停车缴费
			</view>
			<view class="con" v-if="catenum == 6">
				电子发票
			</view>
			<view class="con" v-if="catenum == 7">
				体质检测
			</view>
			<view class="con" v-if="catenum == 8">
				设备报修
			</view> -->
		</view>
	</view>
</template>

<script>
	// import downMenuItem from "@/components/downMenuItem/index.vue";
	const index = require("@/api/index/index.js");
	const venues = require("@/api/venues/venues.js");
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				active: 0,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				cate: [],
				catename: '',
				catenum: '',
				timeData: {},
				detail: {
					list: [],
					tabList: [], //图标菜单
					hiddenTab: false, //隐藏tab
				},
				vennusIdList: "", //产管id
				page: 1,
				address: {
					name: "",
					city: "",
					province: "",
				},
				status: "loading",
				windows: '',
				cate_data: [],
				belong:'',
				totalPage:''
			}
		},
		// components: {
		// 	downMenuItem
		// },

		created() {
			this.getWindowsList();
		},

		onLoad(options) {
			this.windows = options.windows
			this.catename = options.name
			this.catenum = options.windows
			this.getProductByWindows()
		},

		methods: {
			// 判断双数还是单数
			isOdd(num) {
				return num % 2 == 1;
			},
			async getWindowsList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				let that = this;
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let result = await index.getWindowsList(data);
				if (result.code == 1) {
					this.vennusIdList = result.data.venues;
					this.cate = result.data.result
					let reslist =  result.data.result
					
					reslist.forEach(item => {
					if (this.catenum == item.id) {
						this.belong = item.belong
					}
				})
					// that.getVenusList();
					uni.hideLoading();
				}
			},

			// async getVenusList(val) {
			// 	let data = {
			// 		venues_id: this.vennusIdList,
			// 		weixinAppId: this.$https.weixinAppId,
			// 		projectId: getApp().globalData.projectId,		limit: 10,
			// 		page: this.page,
			// 		province: this.address.province,
			// 		city: this.address.city,
			// 		...this.coordinates,
			// 		searchVal: val,
			// 	};
			// 	let result = await index.getVenusList(data);
			// 	if (result.code == 1) {
			// 		if (this.detail.list.length < 1) {
			// 			this.detail.list = result.data.data;
			// 		} else {
			// 			this.detail.list.push(...result.data.data);
			// 		}
			// 		this.status = "loadmore";

			// 		if (result.data.data.length < 10) {
			// 			this.status = "nomore";
			// 		}
			// 	}
			// },
			// 场地预约
			cdClick(item) {
				var _this = this
				var now = new Date()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				this.time_list = h + ':' + min
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					product_id: item.id
				};
				train.getCourtProduct(data).then(result => {
					// this.each_num.open_time_end = result.data.result.open_time_end
					// this.each_num.open_time_start = result.data.result.open_time_start
					let open_time_end = result.data.result.open_time_end
					let open_time_start = result.data.result.open_time_start
					if (this.time_list > open_time_start && this.time_list < open_time_end) {
						uni.navigateTo({
							url: '/page_venues/pages/venuesDetail/stadium/stadium?venue_id=' + item.venue_id +
								"&id=" +
								item.id +
								"&court_id=" +
								item.id+
								"&windows=" +
								item.windows +
								"&name=" +
								item.court_name +
								'&venueDetail=' +
								item.product_name
						})
					}
				})

			},
			// loadNewsList() {
			// 	this.status = "loadmore";
			// 	this.page += 1;
			// 	this.getProductByWindows();
			// },

			fenlei(item, e) {
				this.windows = item.id
				this.catenum = item.id
				this.belong = item.belong
				this.cate_data = []
				this.page = 1
				this.getProductByWindows()
			},
			async getProductByWindows() {
				let that = this;
				if (this.page === 1) that.cate_data = [];
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// });
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					windows: this.windows,
					limit: 10,
					page: this.page,
				};
				let result = await index.getProductByWindows(data);
				if (result.code == 1) {
					that.cate_data = that.cate_data.concat(result.data.result.data); //将数据拼接在一起
					that.totalPage = result.data.result.pages
					// uni.hideLoading();
					// if (result.code == 1) {
					// 	if (this.cate_data.length < 1) {
					// 		this.cate_data = result.data.result.data;
					// 	} else {
					// 		this.cate_data.push(...result.data.result.data);
					// 	}
					// 	this.status = "loadmore";

					// 	if (result.data.result.data.length < 10) {
					// 		this.status = "nomore";
					// 	}
					// }
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.page += 1;
				this.getProductByWindows()
			},
			onChange(e) {
				this.timeData = e;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		display: flex;
		flex-direction: column;
		height: 100%;

		.swiper {
			// padding: 0rpx 24rpx 15rpx;
		}

		.main {
			flex: 1;
			display: flex;
			height: 0;

			.aside {
				background-color: rgb(243, 243, 243);
				height: 100%;
				// min-width: 20%;
				width: 25%;
				z-index: 999;
				position: fixed;

				.aside-item {
					padding: 25rpx 0;
					color: rgb(51, 51, 51);

					.aside-name {
						width: 100%;
						font-size: 26rpx;
						box-sizing: border-box;
						padding: 5rpx 0px;
						padding-left: 50rpx;
					}
				}

				.active {
					font-weight: 700;
					color: rgb(47, 117, 250) !important;
					background-color: white !important;

					.aside-name {
						border-left: 8rpx solid rgb(47, 117, 250);
						;
					}
				}
			}

			.con {
				flex: 1;
			}

			//会员办卡
			.data-list2 {
				.scroll {
					// height: 100%;
					width: 75%;
					position: absolute;
					right: 0;

					.data-item {
						margin-top: 20rpx;
						height: 160rpx;
						padding: 10rpx;
						background-color: #ffffff;
						border-radius: 20rpx;

						.image {
							width: 214rpx;
							height: 137rpx;

							/deep/ .u-fade-enter-to {
								height: 100%;
							}
						}

						.detail {
							height: 100%;
							width: 0;
							flex: 1;
							margin-left: 15rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.title {
								font-size: 28rpx;
								margin-bottom: 10rpx;
							}

							.tag-list {
								margin-bottom: 10rpx;

								.tag {
									font-size: 22rpx;
									color: white;
									border-radius: 10rpx;
									padding: 5rpx 10rpx;
									color: black;
									// background-color: #e7e7e7;
									color: #fff !important;
									background-color: #2979ff;
									margin-right: 10rpx;
								}
							}

							.info {
								font-weight: 700;
								font-size: 25rpx;
								color: #ff4811;
							}

							.price {
								font-size: 30rpx;
								color: #ff4811;
								font-weight: 700;
								margin-right: 10rpx;
							}

							.price-2 {
								color: #999999;
								font-size: 22rpx;
							}
						}
					}
				}
			}

			// 门票购买
			.data-list1 {
				.scroll {
					// height: 100%;
					width: 75%;
					position: absolute;
					right: 0;

					.data-item {
						// margin-top: 20rpx;
						// height: 220rpx;
						// box-shadow: 0px 0px 5px #e7e7e7;
						// padding: 10rpx;

						margin-top: 20rpx;
						height: 160rpx;
						padding: 10rpx;
						// background-color: #8c8c8c;
						border-radius: 20rpx;

						.image {
							width: 160rpx;
							height: 147rpx;

							/deep/ .u-fade-enter-to {
								height: 100%;
							}
						}

						.detail {
							height: 100%;
							width: 0;
							flex: 1;
							margin-left: 15rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.title {
								font-size: 28rpx;
								margin-bottom: 10rpx;
							}

							.tag-list {
								margin-bottom: 10rpx;

								.tag {
									font-size: 22rpx;
									color: white;
									border-radius: 10rpx;
									padding: 5rpx 10rpx;
									color: #fff;
									background-color: #2979ff;
									margin-right: 10rpx;
								}
							}

							.tiemr {
								color: #cfcfcf;
								font-size: 22rpx;
							}

							.price {
								font-size: 30rpx;
								color: #ff4811;
								font-weight: 700;
								margin-right: 10rpx;
							}

							.price-2 {
								color: #cfcfcf;
								font-size: 22rpx;
								text-decoration: line-through;
							}
						}
					}
				}
			}

			.data-list5 {
				.scroll {
					// height: 100%;
					width: 75%;
					position: absolute;
					right: 0;

					.goods-item {
						height: 220rpx;
						margin-top: 20rpx;
						padding: 10rpx;

						.image {
							width: 200rpx;
							height: 100%;
							border-radius: 7rpx;
							// overflow: hidden;
							position: relative;

							/deep/ .u-transition {
								width: 100%;
								height: 100%;
							}

							.image-info {
								position: absolute;
								bottom: 0;
								width: 100%;
								left: 0;
								font-size: 24rpx;
								text-align: center;
								color: white;
								padding: 10rpx 0;
								background-color: rgba(0, 0, 0, 0.5);
							}

							.tag1 {
								position: absolute;
								top: 0;
								left: 0;
								font-size: 23rpx;
								color: white;
								padding: 7rpx 15rpx;
								border-radius: 0px 0px 15rpx 0px;
								background-image: linear-gradient(to right, #528eff, #2f75fa);
							}
							.tag2 {
								position: absolute;
								top: 0;
								left: 0;
								font-size: 23rpx;
								color: white;
								padding: 7rpx 15rpx;
								border-radius: 0px 0px 15rpx 0px;
								background-image: linear-gradient(to right, #43e090, #26cd78);
							}
							.tag3 {
								position: absolute;
								top: 0;
								left: 0;
								font-size: 23rpx;
								color: white;
								padding: 7rpx 15rpx;
								border-radius: 0px 0px 15rpx 0px;
								background-image: linear-gradient(to right, #ed7af4, #ec46f6);
							}
						}

						.detail {
							flex: 1;
							width: 0;
							height: 100%;
							display: flex;
							flex-direction: column;
							margin-left: 30rpx;
							justify-content: space-between;

							.title {
								font-size: 28rpx;
								margin-bottom: 10rpx;
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.tag {
								font-size: 22rpx;
								// background-color: #f4f3f4;
								background-color: #2979ff;
								border-radius: 8rpx;
								padding: 5rpx 10rpx;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
							}

							.detail-2 {
								color: #a3a3a3;
								font-size: 23rpx;

								image {
									width: 25rpx;
									height: 25rpx;
									margin-right: 10rpx;
								}
							}

							.price {
								color: #ff6a42;

								text {
									font-weight: 700;
									font-size: 37rpx;
								}
							}

							.info {
								color: #a3a3a3;
								font-size: 23rpx;
								margin-left: 15rpx;
								transform: translateY(4rpx);
							}
						}
					}
				}
			}

			// 赛事报名
			.data-list9 {
				// margin-top: 10rpx;
				padding: 10rpx;

				.scroll {
					// height: 100%;
					width: 75%;
					position: absolute;
					right: 0;

					.data-item {
						margin-bottom: 30rpx;
						margin-top: 20rpx;

						.image {
							position: relative;

							.top-tag {
								position: absolute;
								top: 0;
								left: 0;
								color: white;
								border-radius: 5px 0px 0 0;
								background-color: #2f75fa;
								font-size: 22rpx;
								padding: 5rpx 10rpx;
							}
						}

						.title {
							font-size: 30rpx;
							margin-top: 10rpx;
							// margin-bottom: 10rpx;
						}

						.count-down {
							height: 35rpx;
							width: 200rpx;

							.time {
								font-size: 20rpx;
								display: flex;

								text {
									color: #f63939;
									display: block;
									background-color: #fdc4c3;
									border-radius: 8rpx;
									width: 40rpx;
									text-align: center;
									margin: 0px 6rpx;

									&:first-of-type {
										margin-left: 0;
									}
								}
							}

							.price {
								font-size: 22rpx;
								color: #ff571c;

								text {
									font-size: 35rpx;
									font-weight: 700;
								}
							}
						}
					}
				}
			}

			// 场地预约
			.data-list6 {
				width: 100%;
				height: 100%;
				overflow: hidden;

				.scrollcolumn {
					// height: 100%;
					width: 75%;
					position: absolute;
					right: 0;

					.goods-item {
						// height: 220rpx;
						// margin-top: 30rpx;
						margin-top: 20rpx;
						height: 160rpx;
						padding: 10rpx;
						border-radius: 20rpx;
						// overflow: hidden;

						.image {
							width: 200rpx;
							height: 100%;
							border-radius: 7rpx;
							// overflow: hidden;
							position: relative;

							/deep/ .u-transition {
								width: 100%;
								height: 100%;
							}

							.image-info {
								position: absolute;
								bottom: 0;
								width: 100%;
								left: 0;
								font-size: 24rpx;
								text-align: center;
								color: white;
								padding: 10rpx 0;
								background-color: rgba(0, 0, 0, 0.5);
							}

							.tag {
								position: absolute;
								top: 0;
								left: 0;
								font-size: 19rpx;
								color: #2f2f2f;
								padding: 7rpx 15rpx;
								background-color: rgb(255, 202, 0);

							}
						}

						.detail {
							flex: 1;
							width: 0;
							height: 100%;
							display: flex;
							flex-direction: column;
							// margin-left: 30rpx;
							justify-content: space-between;

							/deep/ .u-tag--mini {
								padding: 0px 10rpx !important;
								height: 18px;
							}

							.detail-1 {
								display: flex;

								/deep/ view {
									margin-right: 10rpx;
								}
							}


							.title {
								font-size: 28rpx;
								margin-bottom: 10rpx;
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.tag {
								font-size: 22rpx;
								// background-color: #f4f3f4;
								background-color: rgb(255, 202, 0);
								border-radius: 8rpx;
								padding: 5rpx 10rpx;
								margin-right: 10rpx;
								margin-bottom: 20rpx;
							}

							.detail-2 {
								color: #a3a3a3;
								font-size: 23rpx;

								image {
									width: 25rpx;
									height: 25rpx;
									margin-right: 10rpx;
								}
							}

							.price {
								color: #000000;

								text {
									display: flex;
									width: 100%;
									justify-content: space-between;
									padding-bottom: 10rpx;
									color: #b8b8b7;
									font-size: 24rpx;
								}
							}

							.item-info-bottom {
								display: flex;
								width: 100%;
								justify-content: space-between;
								padding-bottom: 10rpx;
								color: #b8b8b7;
								font-size: 24rpx;

								.desc {
									width: 100%;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.info {
								color: #a3a3a3;
								font-size: 23rpx;
								margin-left: 15rpx;
								transform: translateY(4rpx);
							}
						}
					}
				}
			}
		}
	}
</style>
